<template>
  <basic-container>
    <el-tabs v-model="orderType" @tab-click="handleClick">
      <el-tab-pane label="蛋糕订单" name="1">
      </el-tab-pane>
      <el-tab-pane v-for="item in types" :key="item.code" :label="item.label" :name="item.code">
      </el-tab-pane>
    </el-tabs>

    <div>
      <keep-alive>
        <Pending-orders v-if="orderType === '1'" key="1"></Pending-orders>

        <template v-for="item in types">
          <Pending-orders  v-if="orderType === item.code" :key="item.code" :addedServices="item.code"></Pending-orders>
        </template>
      </keep-alive>
    </div>
  </basic-container>
</template>

<script>
import PendingOrders from './Pending-orders.vue'
import { mapGetters } from 'vuex';

const whileCodeList = ["MAGIC", "FLOWER", "GIANT_PANDA", "DELIVERY_MANAGER"]

export default {
  components: {
    PendingOrders
  },
  data() {
    return {
      orderType: '1'
    };
  },
  computed: {
    ...mapGetters(['addedServicesTypeList']),
    types() {
      return this.addedServicesTypeList.filter(item => whileCodeList.includes(item.code))
    }
  },
  methods: {
    handleClick() {

    }
  }
};
</script>
<style lang="scss" scoped>

</style>